<template>
  <view class="content">
	  <view class="headerBox" :style="'padding-top:' + statusBarHeight + 'px;'" @tap="goback">
	        <view class="" style="display: flex; align-items: center;" hover-class="none" hover-stop-propagation="false">
	          <u-icon name="arrow-left" color="#000000" size="32" v-if="fromPage" ></u-icon>
	          <view class="notice" style="width: 100%;text-align: center;font-size: 32rpx;">
	            登录
	          </view>
	        </view>
	      </view>
    <view class="huanying">HELLO，{{BASE=='https://app.hxzx365.com/gateway/app'?'':BASE== 'http://124.70.14.193:8079/app' ? '测试环境' : '本地环境'}}</view>
    <view class="huanyingText">
      欢迎登录
      <text>援亲APP</text>
    </view>
    <view class="huanyingDes">
      关爱农村留守老人，鸿心与您一路同行！
    </view>
    <view class="Form">
      <u-form :model="form" ref="uForm" label-width="120">
        <u-form-item label="手机号" prop="phone">
          <u-input v-model="form.phone" placeholder="请输入手机号" type="number" maxlength="11" :adjust-position="false"/>
        </u-form-item>
        <u-form-item label="验证码" prop="authCode">
          <u-input v-model="form.authCode" placeholder="请输入验证码" type="number" maxlength="6" :adjust-position="false"/>
          <text slot="right" :style="codeStatus ? 'color: #2AC630;' : 'color: #999999;'" class="codeText"
            @click="getCode">{{ codeTips }}</text>
        </u-form-item>
      </u-form>
    </view>

    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
    <view class="loginBtn">
      <u-button @click="submit" type="error">立即登录</u-button>
    </view>
    <!-- <view class="otherLogin">
			<u-divider color="#999999">其他登录方式</u-divider>
		</view>
		<view class="wxLogin">
			<view class="wxBox">
				<image src="../../static/image/login/wx.png" class="wxIcon" mode="scaleToFill" />
				<button @tap="wxToLogin"></button>
			</view>
		</view> -->
    <view class="" style="display: flex;align-items:center;justify-content:center;position: fixed;bottom: 40rpx;left: 0;right: 0;">
      <view style="width: 50rpx;">
        <u-checkbox-group @change="checkboxGroupChange" shape="circle">
          <u-checkbox @change="checkboxChange" v-model="checked" active-color="red"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="title">
        我已阅读并同意<span @tap="agreement">《用户协议》</span>和<span @tap="agreementtwo">《隐私政策》</span>
      </view>
    </view>
    <!-- <u-modal v-model="show" :show-cancel-button="true" confirm-text="同意" cancel-text='拒绝'
				title="温馨提示" @cancel="cancel" @confirm="confirm" ref="modal">
            <scroll-view scroll-y="true" style="text-align: justify; word-wrap: break-word;height: 700rpx;overflow-y: scroll;box-sizing: border-box;padding: 0 46rpx;">
              <view class="" style="padding: 60rpx 0;">
                亲爱的用户，感谢使用援亲APP！
              </view>
              <view class="">
                我们依据法律制定了<text @tap="agreement" style="color: #D12C25;">《用户协议》</text>和<text @tap="agreementtwo" style="color: #D12C25;">《隐私政策》</text>，请你点击“同意”之前仔细阅读并充分理解相关条款。
              </view>
              <view class="" style='padding: 40rpx 0;'>
                为了向您提供更好的服务,我们需要获取以下权限和信息，系统将以弹窗提示征求您的授权。
              </view>
              <view class="" style='padding: 20rpx 20rpx;'>
                <view>1.地理位置</view>
                <view style="color: #666;">经授权，我们会收集您的地理位置信息，以便为您提供周边生活服务。请注意，部分业务地理位置是必要信息，拒绝授权可能影响正常使用。</view>
                <view>2.相机</view>
                <view style="color: #666;">经授权，我们会在您使用扫码、拍照等对应服务时使用您的相机功能。</view> 
                <view>3.相册</view>
                <view style="color: #666;">经授权，我们会在您上传图片或证件信息时，使用您的相机功能。</view>
                <view>4.设备信息</view>
                <view style="color: #666;">经授权，我们会收集您的设备信息以保障系统运行和您的账号安全。</view>
              </view>
            </scroll-view>
		</u-modal> -->
  </view>
</template>

<script>
import { getCode, wxLogin, login } from '@/api/login'
import {BASE_URL} from '@/api/request.js'
export default {
  data() {
    return {
	  statusBarHeight: 0, // 系统导航栏
	  fromPage:'',
    BASE: BASE_URL,
      form: {
        phone: "",
        authCode: "",
      },
      rules: {
        phone: [{
          type: 'number',
          required: true,
          message: '请输入手机号',
          trigger: ['change', 'blur'],
        }, {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: '手机号码不正确',
          // 触发器可以同时用blur和change
          trigger: ['change', 'blur'],
        }],
        authCode: [{
          type: 'number',
          required: true,
          message: '请填写验证码',
          trigger: ['change', 'blur']
        }, {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // uni.$u.test.mobile()就是返回true或者false的
            return this.$u.test.code(value, 6);
          },
          length: 6,
          message: '请填写6位验证码',
          // 触发器可以同时用blur和change
          trigger: ['change', 'blur'],
        }]
      },
      codeTips: '',
      codeStatus: true,
      checked: false,
      show:true
    }
  },
  onLoad(options) {
  	this.statusBarHeight = uni.getStorageSync('statusBarHeight')
  	 console.log('导航栏高度:', this.statusBarHeight)
	 this.fromPage = options.fromPage // 获取跳转来源页面的状态
	 console.log('fromPage',this.fromPage);
  },
  onReady() {
    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
	  goback(){
		if (this.fromPage) {
			uni.reLaunch({
				url:'/pages/delivery/index'
			});
		}
	  },
    //阅读协议
    agreement() {
      uni.navigateTo({
        url: "/pagesMine/rulesCenter?type=1"
      })
    },
    agreementtwo() {
      uni.navigateTo({
        url: "/pagesMine/rulesCenter?type=2"
      })
    },
    checkboxChange(e) {
      
      this.checked = e.value
      console.log(e.value, this.checked);
    },
    checkboxGroupChange(e) {
      console.log(e);
      this.radioChecked = e
    },
    codeChange(text) {
      this.codeTips = text;
    },
    cancel() {
			 plus.runtime.quit();  
		},
		confirm() {
			// this.checked=true
		},
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: '正在获取验证码',
          mask: true
        })
        let obj = {
          phone: this.form.phone,
          showLoading: true
        }
        getCode(obj).then(res => {
          uni.hideLoading();
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
          this.$u.toast(res.message);
          this.codeStatus = false;
        })
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let obj = {
            phone: this.form.phone,
            code: this.form.authCode
          }
          if (this.checked == false) {
            this.$u.toast('请勾选用户协议与隐私政策');
            this.show=true
          } else {
            login(obj).then(res => {
              console.log('登录登录登录', res)
              uni.setStorageSync('phone',this.form.phone)
              uni.setStorageSync('token', res.data.token)
              if (!uni.getStorageSync('latAndLong')) {
                let obj = {
                  latitude: 40.044896,
                  longitude: 117.419021
                }
                uni.setStorageSync('latAndLong', obj)
                let address = {
                  "country": "中国",
                  "province": "天津市",
                  "city": "天津市",
                  "district": "蓟州区",
                  "street": "中昌北大道",
                  "streetNum": "180号",
                  "poiName": "东方商厦(中昌北大道)",
                  "cityCode": "022"
                }
                uni.setStorageSync('address', address)
              }
              uni.switchTab({ url: '/pages/delivery/index' })
              
              // uni.navigateTo({
              // 	url:'/pagesHealth/goHistoryDetail',
              // })
            })
          }

          console.log('验证通过');

        } else {
          console.log('验证失败');
        }
      });
    },
    wxToLogin() {
      uni.login({
        success: function (loginRes) {
          console.log(loginRes, '授权登录');
          let obj = {
            authResult: loginRes.authResult,
          }
          console.log(loginRes.authResult)
          wxLogin(loginRes.authResult).then(res => {
            console.log('看看token', res.data.token)
            uni.setStorageSync('token', res.data.token)
            uni.reLaunch({ url: '/pages/index/index' })
          })
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 0 56rpx;

  .huanying {
    margin-top: 130rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 72rpx;
    color: #000000;
    font-style: normal;
    text-transform: none;
  }

  .huanyingText {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #000000;
    line-height: 44rpx;
    font-style: normal;
    margin-top: 38rpx;

    text {
      color: #D12C25;
    }
  }

  .huanyingDes {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 44rpx;
    font-style: normal;
    margin-top: 24rpx;
  }

  .codeText {
    font-size: 28rpx;
  }

  .Form {
    margin-top: 140rpx;

    ::v-deep .u-border-bottom:after {
      border-color: #999;
    }
  }

  .loginBtn {
    margin-top: 48rpx;
    font-size: 32rpx;
    color: #FFFFFF;

    ::v-deep .u-btn--error {
      background-color: #D12C25 !important;
      border-color: #D12C25 !important;
    }
  }

  .otherLogin {
    margin-top: 56rpx;

    ::v-deep .u-divider {
      display: flex;
    }

    ::v-deep .u-divider-line {
      flex: 1;
      border-color: #999999 !important;
    }

    ::v-deep .u-divider-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx !important;
      color: #999999 !important;
      line-height: 44rpx;
      font-style: normal;
      padding: 0 28rpx !important;
    }
  }

  .wxLogin {
    display: flex;
    align-items: center;
    justify-content: center;

    .wxBox {
      margin: 28rpx auto;
      position: relative;

      .wxIcon {
        width: 64rpx;
        height: 64rpx;
      }

      button {
        background: none;
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        top: 0;
        left: 0;
      }

      button::after {
        display: none;
      }
    }
  }

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;

    span {
      color: #D12C25;
    }
  }
}
/* ::v-deep .u-model{
	 height: 900rpx !important;
	 overflow: visible !important;
} */
/* ::v-deep .u-update-content{
  border: 0 !important;
  overflow-y: scroll !important;
} */
::v-deep .u-model__footer{
  border: 0 !important;
  padding: 0 54rpx;
}
::v-deep  .u-model__footer__button{
  width: 256rpx !important;
  height: 64rpx !important;
  line-height: 64rpx !important;
  font-family: PingFang SC;
  font-weight: 400;
  margin: 46rpx 0 !important;
  font-size: 24rpx;
  color: rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.2);
  border-radius: 48rpx;
}
 ::v-deep .uni-scroll-view-content .u-model__footer__button.hairline-left{
  color: #FFFFFF !important;
  background: #D12C25 !important;
  margin-left: 64rpx !important;
}
</style>
